<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <!-- 
      id:标识元素的唯一性
      width:画布的宽度
      height:画布的高度
    -->
   <canvas id="c1" width="600" height="400">
      当前浏览器不支持canvas，请下载最新版浏览器
      <a href="https://www.google.cn/chrome/?standalone=1&platform=win64">立即下载</a>
   </canvas>

   <script>
      // 1.找到画布
      const c1 = document.getElementById('c1')

      // 判断是否有getContext
      if (!c1.getContext) {
         console.log('当前浏览器不支持canvas，请下载最新版浏览器')
      }
      // 2.获取画笔，上下文对象
      const ctx = c1.getContext('2d')

      const heartPath = new Path2D()
      console.log(heartPath)


      // 绘制心形
      heartPath.moveTo(300, 200)
      heartPath.bezierCurveTo(400, 100, 500, 200, 300, 400)
      heartPath.bezierCurveTo(100, 200, 200, 100, 300, 200)
      ctx.stroke(heartPath)

      const chatPath = new Path2D()
      // 绘制聊天气泡框
      chatPath.moveTo(200, 300)
      chatPath.quadraticCurveTo(150, 300, 150, 200)
      chatPath.quadraticCurveTo(150, 100, 300, 100)
      chatPath.quadraticCurveTo(450, 100, 450, 200)
      chatPath.quadraticCurveTo(450, 300, 250, 300)
      chatPath.quadraticCurveTo(250, 350, 180, 380)
      chatPath.quadraticCurveTo(200, 350, 200, 300)
      ctx.stroke(chatPath)
      ctx.fill(chatPath)

      // 创建一条折现
      const polyline = new Path2D('M10 10 h 80 v 80 h -80 z')
      ctx.stroke(polyline)


   </script>
</body>

</html>